<template>
    <div>
        <div>
            <el-input placeholder="会员UID" v-model="searchIid"></el-input>
            <el-date-picker
              v-model="searchTime"
              type="date"
              placeholder="选择日期"
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd">
            </el-date-picker>
            <button @click="search" class="sousuo"><i class="el-icon-search"></i></button>
        </div>
        <el-table v-loading="loading" :data="rankData" border style="width: 100%">
            <el-table-column type="index" :index="(index) => rank + index" label="排名" width="120">
            </el-table-column>
            <el-table-column prop="id" label="用户账号">
                <template v-slot="scope">
                    <div class="userInfo">
                        <div class="img">
                            <img class="head_url" :src="scope.row.user.head_url" alt="">
                        </div>
                        <div class="info">
                            <p class="uid">UID: {{ scope.row.user.id }}</p>
                            <p>{{ scope.row.user.nickname }}</p>
                        </div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="whole_recharge" label="消费金额">
                <template v-slot="scope">
                    {{ format_money(scope.row.whole_raffle_income)  }}
                </template>
            </el-table-column>
        </el-table>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pagenum"
            :page-sizes="[5, 8, 10]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
    </div>
</template>

<script>
import rank from '../../../api/jurisdiction'
import {format_money} from "@/utils/format";
export default {
    data() {
        return {
            rankData: [],
            searchIid:null,
            loading:true,
            searchTime:null,
            pagenum: 1,
            pagesize: 8,
            total: 0
        }
    },
    computed: {
        rank() {
          return ((this.pagenum - 1) * this.pagesize) + 1
        }
    },
    created() {
        this.getRank()
    },
    methods: {
      format_money,
        search() {
            this.getRank()
        },
        getRank() {
            rank.xiaofeiRank({ page: this.pagenum, page_size: this.pagesize, uid:this.searchIid,date: this.searchTime }).then((res) => {
                this.total = res.data.data.sum_count
                this.rankData = res.data.data.list
                this.loading = false
            })
        },
        handleSizeChange(val) {
            this.pagesize = val
            this.getRank()
        },
        handleCurrentChange(val) {
            console.log(this.pagenum);
            this.pagenum = val
            this.getRank()
        }
    },
}
</script>

<style lang="less" scoped>
.el-pagination {
    margin-top: 10px;
    text-align: center;
}

.el-input {
    width: 150px;
    margin-right: 20px;
}
.sousuo {
    margin: 6px;
    width: 50px;
    height: 40px;
    background: #009688;
    border: 0;
    color: white;
    font-size: 20px;
    vertical-align: middle;
    text-align: center;
    line-height: 40px;
    border-radius: 4px;
    cursor: pointer;
}
.el-table {
    margin-top: 20px;
}

.userInfo {
    width: 90%;
    height: 90%;
}

.img,
.img img {
    float: left;
    width: 50px;
    height: 50px;
}

.info {
    float: left;
    margin-left: 9px;
    font-size: 13px;
}

.uid {
    color: red;
}</style>